<template>
	<view class="main">
		<view class="topbar">
			<text class="back" @tap="goback"> < </text>
			<text>订单详情</text>
		</view>
		<div class="order-status">等待支付</div>
		<view @tap="chooseAdd" class="address-block">
			<div class="send-name">收件人: {{addressItem.name}}</div>
			<div class="send-tel">手机号: {{addressItem.tel}}</div>
			<div class="address">收货地址: {{addressItem.provinceStr+addressItem.cityStr+addressItem.areaStr+addressItem.cityBak}}</div>
		</view>
		<div class="order-card">
			<div class="order-title">
				<text>订单编号: {{orderId}}</text>
				<text class="status">等待支付</text>
			</div>
			<div class="sku-block">
				<image class="img" src=""></image>
				<div class="info">
					<div class="p1">
						<text class="title">{{detail.name}}</text>
						<text class="price">¥{{detail.price}}</text>
					</div>
					<div class="p2">
						<text>编号：</text>
						<text>x {{buyCount}}</text>
					</div>
					<div class="p3">
						<text>规格：{{detail.color_text}}</text>
					</div>
				</div>
			</div>
			<div class="total-price">
				<text>合计: ￥{{total}}</text>
			</div>
			<!-- buttons -->
			<div class="btns">
				<div class="btn" @click="goPay">确认付款</div>
			</div>
		</div>
	</view>
</template>

<script>
	import { addOrderBatch } from '../../../api/order/order.js'
	export default {
		data() {
			return {
				detail:{},
				buyCount:1,
				orderId:'',
				total:0,
				addressItem:{},
				orderDetail:[]
			}
		},
		onLoad(option) {				
			this.detail = JSON.parse(uni.getStorageSync('choosenItem'))
			if(option.buyCount){
				this.buyCount = option.buyCount
				localStorage.setItem('byCount',this.buyCount)
			}else{
				this.byCount = localStorage.getItem('buyCount')
				console.log(this.byCount)
			}
			uni.setStorageSync('buyDetail',JSON.stringify(this.detail))
			if(!option.choosenItem){
				this.detail = JSON.parse(uni.getStorageSync('buyDetail'))
				this.addressItem = JSON.parse(option.addressItem)	
			}
			this.total = this.buyCount * this.detail.price
		},
		methods:{
			goPay(){
				var item = {
					skuId:this.detail.id,
					price:this.detail.price,
					count:this.buyCount
				}
				this.orderDetail.push(item)
				var orderObj = {
					userId:'bdecbb72264e4ec581061d4770a2e914',
					addressId:this.addressItem.id,
					count:this.detail.count,
					freight:0,
					price:this.detail.price,
					orderDetail:this.orderDetail
				}	
				addOrderBatch(
					orderObj
				).then(res=>{
					console.log(res)
					this.orderId = res.data.orderId
					// console.log(this.data.orderId)
					var params = {
						orderId:this.orderId,
						total:this.total
					}
					uni.setStorageSync('params',JSON.stringify(params))
					uni.showLoading({
					    title: '正在提交订单',
					});			
					setTimeout(function(){
						uni.navigateTo({
						   url:`/pages/mine/order/pay` 
						});
					},1500)
					
				})
				
			},
			chooseAdd(){
				uni.navigateTo({
				   url:"/pages/mine/address/add?num=1" 
				});
			},
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		.topbar{
				position: fixed;
				left: 0;
				top: 0;
				background-color: #354e44;
				color: #fff;
				width: 100%;
				height: 44px;
				line-height: 44px;
				text-align: center;
				z-index: 998;
				.back{
					font-size: 24px;
					position: absolute;
					left: 20px;
				}
		}
		.order-status {
			font-size: 36rpx;
			color: #494949;
			height: 88rpx;
			border-bottom: 1px solid #E5E5E5;
			line-height: 88rpx;
			margin: 0 60rpx;
			box-sizing: border-box;
		}
		
		.address-block {
			font-size: 28rpx;
			color: #494949;
			border-bottom: 1px solid #E5E5E5;
			margin: 0 60rpx;
			box-sizing: border-box;
			padding: 30rpx 0;
			div{
				margin-top: 10px;
			}
		}
		
		.order-card {
			width: 672rpx;
			box-sizing: border-box;
			padding: 36rpx;
			border-radius: 24rpx;
			background-color: #fff;
			margin: 30rpx auto;
			font-size: 24rpx;
			color: #3E3E3E;
		
			.order-title {
				line-height: 33rpx;
				display: flex;
				justify-content: space-between;
		
				.status {
					color: #034C46;
				}
		
				border-bottom: 1px solid #F1ECE7;
				padding-bottom: 30rpx;
			}
		
			.sku-block {
				display: flex;
				justify-content: flex-start;
				border-bottom: 1px solid #F1ECE7;
				padding: 30rpx 0;
		
				.img {
					width: 162rpx;
					height: 162rpx;
					flex-shrink: 0;
					background-color: #8F8F94;
				}
		
				.info {
					width: 470rpx;
					margin-left: 28rpx;
		
					.p1,
					.p2 {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
		
					.p1 {
						font-size: 26rpx;
						line-height: 37px;
		
						.title {
							color: #3E3E3E;
						}
		
						.price {
							colro: #8D8D8D;
						}
					}
		
					.p2,
					.p3 {
						font-size: 22rpx;
						color: #8D8D8D;
						line-height: 30rpx;
						margin-top: 5rpx;
					}
		
					.p4 {
						text-align: right;
						margin-top: 10rpx;
						color: #8D8D8D;
						text-decoration: underline;
					}
		
				}
			}
		
			.total-price {
				font-size: 26rpx;
				line-height: 37rpx;
				text-align: right;
				margin-top: 14rpx;
			}
		
			.btns {
				margin-top: 20rpx;
				display: flex;
				justify-content: flex-end;
		
				.btn {
					width: 124rpx;
					height: 50rpx;
					border: 1px solid #2D4F43;
					font-size: 26rpx;
					border-radius: 10rpx;
					color: #2D4F43;
					text-align: center;
					line-height: 50rpx;
					margin-left: 32rpx;
				}
			}
		
		}
	}
</style>
